<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">阶段数据统计表</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>阶段数据统计表</cite></a>
        </span>
    </div>
</div>

<div id="learn-chart" style="display: flex;justify-content: space-around">
    <div id="avg-day" style="width: 400px;height:400px;"></div>
    <div id="count-people" style="width: 400px;height:400px;"></div>
    <div id="pass-num" style="width: 400px;height:400px;"></div>
</div>
<script>
    layui.use(['config'], function () {
        var config = layui.config;
        //报表展示
        $.ajax({
            url: config.base_server + 'api-study/learnRate/otherQuery',
            data:{access_token: config.getToken().access_token},
            type:'get',
            success: function (data){
                var avgDays=data.data.avgDays;
                var countPeople=data.data.countPeople;
                var passNum=data.data.passNum;

                var xAxis1 = new Array();
                var xAxis2 = new Array();
                var xAxis3 = new Array();
                var avgDaySeries = new Array();
                var countPeopleSeries = new Array();
                var passNumSeries = new Array();
                for (var i=0;i<avgDays.length;i++){
                    xAxis1.push(avgDays[i].stitle);
                    avgDaySeries.push(avgDays[i].avgday);
                }
                for (var j=0;j<countPeople.length;j++){
                    xAxis2.push(countPeople[j].stitle);
                    console.log(xAxis2)
                    countPeopleSeries.push(countPeople[j].number);
                }
                for (var k=0;k<passNum.length;k++){
                    xAxis3.push(passNum[k].stitle);
                    passNumSeries.push(parseInt(passNum[k].passnum)/parseInt(passNum[k].number));
                }
                $('#avg-day').highcharts({
                    chart: {
                        type: 'column'                  //指定图表的类型，默认是折线图（line）
                    },
                    credits:{
                        enabled: false // 禁用版权信息
                    },
                    title: {
                        text: '学员阶段-平均天数表'                 // 标题
                    },
                    xAxis: {
                        categories: xAxis1   // x 轴分类
                    },
                    yAxis: {
                        title: {
                            text: '平均天数'                // y 轴标题
                        }
                    },
                    series: [{                              // 数据列
                        name: '阶段平均天数',                        // 数据列名
                        data: avgDaySeries                     // 数据
                        }
                    ]
                });
                $('#count-people').highcharts({
                    chart: {
                        type: 'column'                  //指定图表的类型，默认是折线图（line）
                    },
                    credits:{
                        enabled: false // 禁用版权信息
                    },
                    title: {
                        text: '学员阶段-阶段人数表'                 // 标题
                    },
                    xAxis: {
                        categories: xAxis2   // x 轴分类
                    },
                    yAxis: {
                        title: {
                            text: '人数'                // y 轴标题
                        }
                    },
                    series: [
                        {
                            name: '阶段人数',                        // 数据列名
                            data: countPeopleSeries
                        }
                    ]
                });
                $('#pass-num').highcharts({
                    chart: {
                        type: 'column'                  //指定图表的类型，默认是折线图（line）
                    },
                    credits:{
                        enabled: false // 禁用版权信息
                    },
                    title: {
                        text: '学员阶段-通过率表'                 // 标题
                    },
                    xAxis: {
                        categories: xAxis3   // x 轴分类
                    },
                    yAxis: {
                        title: {
                            text: '通过率'                // y 轴标题
                        }
                    },
                    series: [
                        {
                            name: '阶段通过率',                        // 数据列名
                            data: passNumSeries
                        }
                    ]
                });
            }
        })

    });
</script>